/*这个文件放置主界面的样式*/

.client-container {
    /* 因为container的父亲是body，而body是整个页面，整个页面是100%，所以这里设置成100是跟随父亲所以是整个页面的高度 */
    height: 100%;
    /* 因为想要中间的聊天区域也就是容器中的内容垂直居中，所以： */
    width: 100%;
    display: flex;
    /* 水平方向居中 */
    justify-content: center; 
    /* 垂直方向居中 */
    align-items: center;
    
} 

.main {
    width: 1000px;
    height: 600px;
    background-color: rgb(238, 238, 238);
    /* 圆角 */
    border-radius: 5px;
    /* 为了能让左右分隔开，使用弹性布局 */
    display: flex;

    z-index: 2;

}

/* 针对左右设置 */
.main .left {
    /* 因为这个main区域总共就1000，所以左边就280，右边就720 */
    width: 280px;
    /* 这里高度是相对于父亲的，而它的父亲就是main，所以这里的100%就是main的高度 */
    height: 100%;
    background-color: rgb(46,50,57);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.main .right {
    width: 720px;
    height: 100%;
    background-color: rgb(238, 238, 238);
    /* 上下0，左右20像素 */
    padding: 0 20px;


}
 

.cover {
    width: 100%;
    height: 100%;
    /* 设置当前页面的图片背景 */
     background-image: url(../pic/3.jpg);
     /* 不要平铺 */
    background-repeat: no-repeat;
    /* 水平居中 */
    background-position: center center;
    /* 背景尺寸 */
    background-size: cover;

    /*
    因为div默认是"从上到下"的方式排列的，当给cover设置背景后，就会把container顶到下面，所以
    为了让.cover 和 .main 能够重叠，所以给.cover 加上定位 
    此时这个div所处的位置，就可以通过坐标的形式手动指定(可以把div放到页面的任何位置）
    如果不写坐标，就默认放在页面的做上角
    */
    position: absolute;
    /* 纵坐标 如10px*/
    top: 0;
    /* 横坐标 */
    left: 0;

    
    /* 设置z轴坐标 */
    /* 让container在cover前面 */
    z-index: 1;

    /* 使用css滤镜效果，让背景图变得朦胧 */
    filter: blur(20px);

}

.main .left .user {
    height: 80px;
    /* 文字大小 */
    font-size: 20px;
    /* 行高 */
    line-height: 80px;
    color: white;
    padding: 0 20px;
}

.main .left .search {
    height: 40px;
    padding: 0 20px;
    /* 垂直水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;

}

.main .left .search input { 
    height: 34px;
    width: 200px;
    line-height: 34px;
    font-size: 14px;
    color: white;
    background-color: rgb(38, 41, 46);

    /* 取出边框和轮廓线 */
    border: none;
    outline: none;
    /* 输入框中的文字和左侧边界有个间距 */
    padding-left: 10px;
    /* 圆角 */
    border-radius: 5px;
}

.main .left .search button {
    height: 34px;
    width: 34px;
    border: none;
    outline: none;

    border-radius: 5px;
    background-image: url(../pic/搜索.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center center;
}

/* 有点击效果 */
.main .left .search button:active {
    background-color: brown;
}

.main .left .table {
    height: 50px;
    display: flex;
    align-items: center;
}
.main .left .table .tab-session {
    height: 100%;
    width: 50%;

    background-image: url(../pic/消息.png);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: center center;
}

.main .left .table .tab-friend {
    height: 100%;
    width: 50%;

    background-image: url(../pic/用户2.png);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: center center;
}

/* .main .left .table .tab-session:active {
    background-color: brown;
}

.main .left .table .tab-friend:active {
    background-color: brown;
} */

.main .left .list {
    height: 430px;
    /* 如果里面的内容太多了就自动提供一个滚动条 */
    overflow: auto;

}

.main .left .list li {
    height: 60px;
    padding: 10px 20px;
    color: white;
    /* 加上边框 */
    border-top: 1px solid black;
}

.main .left .list .selected {
    background-color: rgb(52, 60, 73);
}

/* 会话列表使用 */
.main .left .list li h3,
.main .left .list li p {
    height: 20px;
    font-size: 14px;
    line-height: 20px;

}
/* 好友列表使用 */
.main .left .list li h4 {
    height: 40px;
    line-height: 40px;
    font-size: 20px;
}

.hide {
    display: none;
}

/* 滚动条 */

::-webkit-scrollbar {
    display: none;
}

.main .right .title {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    border-bottom: 1px solid #211f1f;
}

.main .right .message-show {
    height: 420px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

    /* 如果内容太多，自动进行滚动 */
    overflow: auto;
}

.main .right .message-show .message {
    margin-top: 10px;
    display: flex;
    
}
/* 这个样式让子元素靠左 */
.main .right .message-show .message-left {
    justify-content: flex-start;
}
/* 这个样式让子元素靠右 */
.main .right .message-show .message-right {
    justify-content: flex-end;
}

.main .right .message-show .message .box {
    width: 500px;

}
.main .right .message-show .message .box h4 {
    /* 去掉加粗 */
    font-weight: normal;
    height: 23px;
    line-height: 20px;
    font-size: 20px;

}

.main .right .message-show .message .box p {
    padding: 15px;
    border-radius: 10px;
}

.main .right .message-show .message-right .box p {
    background-color: rgb(24, 152, 24);
}
.main .right .message-show .message-left .box p {
    background-color: gray;
}

.main .right .message-input {
    display: block;
    width: 100%;
    height: 100px;
    border: none;
    outline: none;
    

    margin-top: 3px;
    background-color: rgb(238, 238, 238);
    padding: 10px;
    resize: none;
}

.main .right .ctrl {
    height: 35px;
    display: flex;
    justify-content: flex-end;
}
.main .right .ctrl button {
    height: 27px;
    width: 100px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.main .right .ctrl button:active {
    background-color: grey;
    color: white;
}






